<template>
	<el-container>
		<el-header style="height: auto;">
			<!-- <el-avatar :size="80" shape="square" src="./mqxq.png"></el-avatar>
			<h3>妙奇星球</h3> -->
			<el-row type="flex" justify="center">
				<el-button type="primary" @click="drawer = true" plain>
					<i class="el-icon-more-outline"></i>
				</el-button>
				<el-button type="primary" @click="open" plain>反馈</el-button>
			</el-row>
		</el-header>
		<el-drawer title="我是标题" v-model="drawer" direction="ltr" size="50%" :show-close="true" :withHeader="false">
			<el-menu :default-active="activeIndex" class="el-menu-demo" mode="vertical" @select="handleSelect">
				<el-menu-item index="1">任务</el-menu-item>
				<el-menu-item index="2">角色</el-menu-item>
				<el-menu-item index="3">探索</el-menu-item>
				<el-menu-item index="4">情缘</el-menu-item>
				<el-menu-item index="5">宠物</el-menu-item>
				<el-menu-item index="6">玩具</el-menu-item>
			</el-menu>
		</el-drawer>
		<el-main v-if="activeIndex==1">
			<task></task>
		</el-main>
		<el-main v-if="activeIndex==2">
			<role></role>
		</el-main>
		<el-main v-if="activeIndex==3">
			<explore></explore>
		</el-main>
		<el-main v-if="activeIndex==4">
			<love></love>
		</el-main>
		<el-main v-if="activeIndex==5">
			<pet></pet>
		</el-main>
		<el-main v-if="activeIndex==6">
			<toy></toy>
		</el-main>
	</el-container>
</template>

<script>
	import {
		// ref,
		reactive,
		toRefs,
		getCurrentInstance,
	} from "vue";
	import task from "@/components/task.vue";
	import role from "@/components/role.vue";
	import explore from "@/components/explore.vue";
	import love from "@/components/love.vue";
	import pet from "@/components/pet.vue";
	import toy from "@/components/toy.vue";
	export default {
		components: {
			task,
			role,
			explore,
			love,
			pet,
			toy
		},
		setup() {
			var datas = reactive({
				activeIndex: "1",
				drawer: false
			});
			const {
				proxy
			} = getCurrentInstance();
			const handleSelect = (index) => {
				datas.activeIndex = index;
				setTimeout(() => {
					datas.drawer = false
				}, 500);
			};
			const open = () => {
				proxy.$prompt("请输入您的建议并确认提交", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					inputPattern: /\S/,
					inputErrorMessage: "禁止为空"
				}).then(({
					value
				}) => {
					proxy.$axios.post("https://formspree.io/f/mzbknebq", {
						"email": "mqxq@qq.com",
						"message": value
					}).then(() => {
						proxy.$alert("提交成功！感谢您提交的宝贵建议");
					}).catch(() => {
						proxy.$alert("服务错误");
					})
				}).catch(() => {
					return;
				});
			};
			return {
				...toRefs(datas),
				handleSelect,
				open
			};
		}
	}
</script>

<style>
	.idea {
		position: absolute;
		z-index: 1;
		right: 0;
		top: 0;
	}

	.el-card__body,
	.el-main {
		padding: 0 !important;
	}
</style>
